<template>
  <div class="container">
    <base-header ref="baseheader" @onSearch="onSearch"></base-header>
    <div class="card-box">
      <Row :gutter="12">
        <Col span="12">
          <!-- <div class="title">缴费金额</div> -->
          <div class="flex space-between mb20">
            <div class="num-box" style="width: 100%;">
              <div class="num-num">¥<span class="num-num2">{{
                  simplifyNum(Number(yiBaoNum.totalAmount) / 100)
                }}</span></div>
              <div class="num-tit">医保</div>
            </div>
          </div>
        </Col>
        <Col span="12">
          <!-- <div class="title">缴费人数</div> -->
          <div class="flex space-between mb20">
            <div class="num-box" style="width: 100%;">
              <div class="num-num"><span class="num-num2">{{ simplifyNum(yiBaoNum.residentNum) }}</span></div>
              <div class="num-tit">医保</div>
            </div>
          </div>
        </Col>
      </Row>
      <Row :gutter="12">
        <Col span="24">
          <div class="title">医保缴费统计</div>
          <div ref="dom" style="width: 100%; height: 420px;margin-top: 20px;"></div>
        </Col>
      </Row>
    </div>
    <div class="card-box">
      <Row :gutter="12">
        <Col span="24">
          <div class="title">医保缴费进度</div>
          <div class="flex space-between mb20">
            <div class="num-box">
              <div class="num-num"><span class="num-num2">{{ simplifyNum(yibaoPieData.totalNum) }}</span></div>
              <div class="num-tit">应缴人数</div>
            </div>
            <div class="num-box">
              <div class="num-num"><span class="num-num2">{{ simplifyNum(yibaoPieData.payNum) }}</span></div>
              <div class="num-tit">实缴人数</div>
            </div>
            <div class="num-box">
              <div class="num-num"><span
                class="num-num2">{{ simplifyNum(getReduce(yibaoPieData.totalNum, yibaoPieData.payNum)) }}</span></div>
              <div class="num-tit">未缴人数</div>
            </div>
          </div>
          <div ref="dom2" style="width: 100%; height: 420px;margin-top: 20px;"></div>
        </Col>
      </Row>
    </div>
    <div class="card-box">
      <div class="flex space-between">
        <div class="title" style="margin-bottom: 0;">医保缴费排行</div>
<!--        <div>
          <span class="color333 line16 mr10">选择年份</span>
          <DatePicker
            v-model="pickDate"
            type="year"
            clearable
            placeholder="请选择年份"
            format="yyyy"
            @on-change="handleDaterangeInput"
            :transfer="true"
            :editable="false"
            style="width: 219px;"
          ></DatePicker>
        </div>-->
      </div>
      <BaseTable
        class="table"
        ref="table"
        :loading="tableLoading"
        v-model="criteria"
        :columns="columns"
        :data="tableData"
        @on-search="loadData"
      >
      </BaseTable>
    </div>
  </div>
</template>

<script>
import BaseHeader from "./components/base-header"
import {pieStatics, lineStatics} from "@/view/single-page/home/components/myChart";

export default {
  components: {BaseHeader},
  data() {
    return {
      yiBaoNum: {
        residentNum: 0,
        totalAmount: 0
      },  //医保数字统计
      yibaoPieData: {
        totalNum: 0,
        payNum: 0,
      },  //医保缴费进度
      dom: {},
      dom2: {},
      tableLoading: false,
      tableData: [], // 列表绑定数据
      /**
       * 查询条件
       */
      criteria: {},
      /**
       * 表格字段
       */
      columns: [
        {
          title: "排名",
          type: "index",
          minWidth: 150,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "单位",
          key: "areaName",
          align: "left",
          minWidth: 150,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "缴费金额",
          key: "amount",
          align: "left",
          minWidth: 150,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              "¥" + params.row.amount / 100
            );
          },
        },
        {
          title: "缴费人数",
          key: "insuredNum",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "进度",
          key: "insuredNum",
          align: "left",
          minWidth: 150,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            let percent = params.row.totalNum * 100 ? params.row.insuredNum / params.row.totalNum * 100 : 0;
            percent = Number.isInteger(percent) ? percent : percent.toFixed(2);
            return h(
              "span",
              {style: {textAlign: "left"}},
              percent + "%"
            );
          },
        },
      ],
      pickDate: "",
      orderYear1: "",
    };
  },
  watch: {},
  created() {
    //  缴费年份 默认选中明年
    // let date = new Date().getFullYear() + 1;
    // this.criteria.orderYear = date;
    // 缴费排行-选择年份
    // this.pickDate = new Date(Date.parse(date));
    // this.orderYear1 = date;

    this.loadData();
    this.onResize();

    // 缴费排行
    this.loadPayRankData();
  },
  computed: {},
  methods: {
    loadData() {
      this.workhomeYiBao();
      this.yibaoPieStatics();
    },
    onSearch(data) {
      this.criteria = data;
      this.loadData();
    },
    // 减
    getReduce(num1, num2) {
      let num = Number(num1) - Number(num2);
      num = Number.isInteger(num) ? num : num.toFixed(2);
      return num > 0 ? num : 0;
    },
    // 医保数字统计
    workhomeYiBao() {
      this.APIS.statisticYiBao(this.criteria).then((res) => {
        if (res.code == 20000) {
          this.yiBaoNum = res.data;
          this.yibaolineMonth();
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    // 医保饼图统计
    yibaoPieStatics() {
      this.APIS.statisticYiBaoSpeed(this.criteria).then(res => {
        if (res.code == 20000) {
          this.yibaoPieData = res.data;
          let unStaffNum = 0;
          if (res.data.totalNum - res.data.payNum > 0) {
            unStaffNum = res.data.totalNum - res.data.payNum;
          }
          var seriesData = [
            {
              value: res.data.payNum,
              name: "已缴费占比",
              label: {
                show: res.data.payNum == 0 ? false : true,
                normal: { color: res.data.payNum / res.data.totalNum * 100 >= 25 ? "#fff" : "#333" },
              },
            },
            {
              value: unStaffNum,
              name: "未缴费占比",
              label: {
                show: unStaffNum == 0 ? false : true,
              },
            },
          ];
          pieStatics('dom2', ["#1476FD", "#e9f7ff"], seriesData, this);
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    // 医保折线图统计
    yibaolineMonth() {
      this.APIS.yibaolineMonth(this.criteria).then(res => {
        if (res.code == 20000) {
          this.formatLineData('dom', res);
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    formatLineData(dom, res) {
      let xAxisData = [];
      let seriesData = [];
      let seriesData2 = [];
      let nowYear = new Date().getFullYear();
      let nowMonth = new Date().getMonth() + 1;
      for (var i = 1; i <= nowMonth; i++) {
        let monthData = res.data.find(item => item.payDate == nowYear + "-" + (i < 10 ? "0" + i : i));
        if (monthData) {
          seriesData.push(monthData.amount ? monthData.amount / 100 : 0);
          seriesData2.push(monthData.insuredNum ? monthData.insuredNum : 0);
        } else {
          seriesData.push(0);
          seriesData2.push(0);
        }
        xAxisData.push(i + "月");
      }
      lineStatics(dom, xAxisData, seriesData, seriesData2, this);
    },
    onResize() {
      var self = this;
      window.addEventListener("resize", function () {
        if (Object.keys(self.dom).length > 0) {
          self.dom.resize();
        }
        if (Object.keys(self.dom2).length > 0) {
          self.dom2.resize();
        }
      })
    },

    // 缴费排行-选择年份
    handleDaterangeInput(data) {
      this.orderYear1 = data;
      this.loadPayRankData();
    },
    // 缴费排行
    loadPayRankData() {
      this.tableLoading = true;
      let data = {
        // orderYear: this.orderYear1,
      };
      this.APIS.payRankYiBao(data).then(res => {
        this.tableLoading = false;
        if (res.code == 20000) {
          this.tableData = res.data;
        } else {
          this.$Message.error(res.message)
        }
      })
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
</style>
